<template>
  <div class="f-menu" :style="{ width: store.asideWidth }">
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      :default-active="defaultActive"
      class="border-0 h-full" @select="handleSelect">
      <FMenuTree :asideMenus="asideMenus"/>
    </el-menu>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue';
import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router'
import FMenuTree from '@/layouts/components/FMenuTree.vue'
import {mainStore} from "@/store/index";

const store = mainStore()
const router = useRouter()
const route = useRoute()

// 默认选中标签
const defaultActive = ref(route.path);

// 监听路由变化
onBeforeRouteUpdate((to, from) => {
  defaultActive.value = to.path
})

// 是否折叠
const isCollapse = computed(() => !(store.asideWidth === '250px'))

const filterMenu = (child) => {
  if (!child) return []
  return child.map(subItem => {
    subItem = Object.assign({}, subItem)
    if (subItem.child) {
      subItem.child = filterMenu(subItem.child)
    }
    return subItem
  })
}


// 排除隐藏的菜单
let asideMenus = filterMenu(store.menus);

const handleSelect = (e) => {
  router.push(e)
}
</script>
<style>
.f-menu {
  transition: all 0.2s;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  @apply shadow-md fixed bg-stone-50;
}

.f-menu::-webkit-scrollbar {
  width: 0;
}
</style>